<template>
  <div class="echart-root"></div>
</template>

<script>
const  echarts = require("echarts") ;
export default {
  name: "OrdersStatistics",
  data() {
    return {
      echartsObj: null,
      option: {
        tooltip: {
          show: true,
          formatter: "{b}：{c}%",
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
          borderColor: "#333", // 提示框浮层的边框颜色。...
          borderWidth: 0, // 提示框浮层的边框宽。...
          padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
        },
        series: [
          {
            name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            type: "gauge", // 系列类型
            radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
            center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
            startAngle: 215, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -35, // 仪表盘结束角度,默认 -45
            clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
            max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
            splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
            animation:true,
            animationDuration : 1000 ,
            axisLine: {// 仪表盘轴线(轮廓线)相关配置。
              show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
              lineStyle: { // 仪表盘轴线样式。
                color: [], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 15, //轴线宽度,默认 30。
                shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowColor: "#fff", //阴影颜色。支持的格式同color。
              },
            },
            splitLine: {// 分隔线样式。
              show: false, // 是否显示分隔线,默认 true。
              length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。         
            },

            axisTick: {// 刻度(线)样式。
              show: false, // 是否显示刻度(线),默认 true。
              splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
              length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
            },

            axisLabel: { // 刻度标签。
              show: false, // 是否显示标签,默认 true。
              distance: 5, // 标签与刻度线的距离,默认 5。
              color: "#fff", // 文字的颜色,默认 #fff。
              fontSize: 12, // 文字的字体大小,默认 5。
              formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },

            pointer: {
              // 仪表盘指针。
              show: false, // 是否显示指针,默认 true。
              length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
              width: 5, // 指针宽度,默认 8。
            },

            itemStyle: { // 仪表盘指针样式。
              color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
              borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
              borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
              shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowColor: "#fff", // 阴影颜色。支持的格式同color。
            },

            title: {
              // 仪表盘标题。
              show: true, // 是否显示标题,默认 true。
              offsetCenter: [0, "80%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "#050505", // 文字的颜色,默认 #333。
              fontSize: 16, // 文字的字体大小,默认 15。
            },

            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "#000", // 文字的颜色,默认 auto。
              fontSize: 20, // 文字的字体大小,默认 15。
              formatter: "{value}", // 格式化函数或者字符串
            },
            data: [],
          },
        ],
      },
    };
  },
  props: {
    axisLineColor: {
      type: Array,
      default: () => {
        return [0.8, "rgba(0,255,0,0.8)"];
      },
    },
    seriesData: {
      type: Array,
      default: () => {
        return [
          {
            name: "需求单量",
            value: 85,
          },
        ];
      },
    },
  },
  mounted() {
    this.echartInit();
  },
  methods: {
    setData(){
      this.option.series[0].axisLine.lineStyle.color = [this.axisLineColor, [1, "#ccc"]];
      this.option.series[0].data = this.seriesData;
    },
    echartInit() {
      this.setData()
      this.echartsObj = echarts.init(this.$el);
      this.echartsObj.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echart-root {
  width: 100%;
  height: 100%;
}
</style>